// ==UserScript==
// @name         网页自动刷新（支持秒、分钟、小时 + 倒计时进度条）
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  小巧简洁的网页自动刷新工具，支持秒、分钟、小时选择和倒计时进度条显示，窗口可拖动
// @author       鹏
// @match        *://*/*
// @grant        none
// ==/UserScript==

(function () {
    'use strict';

    // 创建容器
    const container = document.createElement('div');
    container.style.position = 'fixed';
    container.style.top = '10px';
    container.style.right = '10px';
    container.style.width = '180px';
    container.style.height = '100px';
    container.style.backgroundColor = '#ffffff';
    container.style.border = '2px solid #4CAF50';
    container.style.borderRadius = '25px';
    container.style.boxShadow = '0 4px 8px rgba(0, 0, 0, 0.2)';
    container.style.zIndex = '9999';
    container.style.display = 'flex';
    container.style.flexDirection = 'column';
    container.style.alignItems = 'center';
    container.style.justifyContent = 'space-around';
    container.style.cursor = 'move';
    container.style.userSelect = 'none';
    container.style.padding = '5px';

    // 创建输入框
    const input = document.createElement('input');
    input.type = 'number';
    input.placeholder = '时间';
    input.style.width = '50px';
    input.style.height = '25px';
    input.style.textAlign = 'center';
    input.style.border = '1px solid #ccc';
    input.style.borderRadius = '5px';
    input.style.outline = 'none';

    // 创建单位选择框
    const unitSelect = document.createElement('select');
    unitSelect.style.width = '60px';
    unitSelect.style.height = '25px';
    unitSelect.style.border = '1px solid #ccc';
    unitSelect.style.borderRadius = '5px';
    unitSelect.style.outline = 'none';
    ['秒', '分钟', '小时'].forEach((unit) => {
        const option = document.createElement('option');
        option.value = unit;
        option.textContent = unit;
        unitSelect.appendChild(option);
    });

    // 创建复选框
    const checkbox = document.createElement('input');
    checkbox.type = 'checkbox';
    checkbox.style.width = '20px';
    checkbox.style.height = '20px';

    // 创建进度条容器
    const progressBarContainer = document.createElement('div');
    progressBarContainer.style.width = '100%';
    progressBarContainer.style.height = '10px';
    progressBarContainer.style.backgroundColor = '#f3f3f3';
    progressBarContainer.style.borderRadius = '5px';
    progressBarContainer.style.marginTop = '5px';

    const progressBar = document.createElement('div');
    progressBar.style.height = '100%';
    progressBar.style.width = '100%'; // 初始化为满条
    progressBar.style.backgroundColor = '#4CAF50';
    progressBar.style.borderRadius = '5px';
    progressBarContainer.appendChild(progressBar);

    // 将元素添加到容器
    container.appendChild(input);
    container.appendChild(unitSelect);
    container.appendChild(checkbox);
    container.appendChild(progressBarContainer);

    // 添加到页面
    document.body.appendChild(container);

    // 保存刷新设置
    const savedTime = localStorage.getItem('refreshTime');
    const savedUnit = localStorage.getItem('refreshUnit');
    const savedChecked = localStorage.getItem('checkboxChecked') === 'true';

    if (savedTime) input.value = savedTime;
    if (savedUnit) unitSelect.value = savedUnit;
    checkbox.checked = savedChecked;

    // 刷新逻辑
    let refreshInterval;
    let progressInterval;

    const convertToMilliseconds = (time, unit) => {
        switch (unit) {
            case '秒': return time * 1000;
            case '分钟': return time * 1000 * 60;
            case '小时': return time * 1000 * 60 * 60;
            default: return time * 1000;
        }
    };

    const startRefresh = () => {
        const timeInSeconds = parseInt(input.value, 10);
        const unit = unitSelect.value;
        if (!isNaN(timeInSeconds) && timeInSeconds > 0) {
            const interval = convertToMilliseconds(timeInSeconds, unit);
            refreshInterval = setInterval(() => {
                location.reload();
            }, interval);

            // 倒计时进度条动画
            let remainingTime = interval;
            progressBar.style.width = '100%'; // 初始化为满条
            progressInterval = setInterval(() => {
                remainingTime -= 100; // 每次减少 100ms
                const progress = (remainingTime / interval) * 100;
                progressBar.style.width = `${progress}%`;
                if (remainingTime <= 0) {
                    clearInterval(progressInterval); // 重置进度条动画
                }
            }, 100);
        } else {
            alert('请输入有效的刷新时间！');
            checkbox.checked = false;
        }
    };

    const stopRefresh = () => {
        clearInterval(refreshInterval);
        clearInterval(progressInterval);
        progressBar.style.width = '100%'; // 重置为满条
    };

    // 保存设置
    const saveSettings = () => {
        localStorage.setItem('refreshTime', input.value);
        localStorage.setItem('refreshUnit', unitSelect.value);
        localStorage.setItem('checkboxChecked', checkbox.checked);
    };

    // 复选框监听
    checkbox.addEventListener('change', () => {
        saveSettings();
        checkbox.checked ? startRefresh() : stopRefresh();
    });

    // 输入框和单位选择框监听
    input.addEventListener('input', saveSettings);
    unitSelect.addEventListener('change', saveSettings);

    // 启动时恢复设置
    if (checkbox.checked) startRefresh();

    // 拖动功能
    let isDragging = false;
    let offsetX, offsetY;

    container.addEventListener('mousedown', (e) => {
        isDragging = true;
        offsetX = e.clientX - container.getBoundingClientRect().left;
        offsetY = e.clientY - container.getBoundingClientRect().top;
        container.style.cursor = 'grabbing';
    });

    document.addEventListener('mousemove', (e) => {
        if (isDragging) {
            container.style.left = `${e.clientX - offsetX}px`;
            container.style.top = `${e.clientY - offsetY}px`;
        }
    });

    document.addEventListener('mouseup', () => {
        isDragging = false;
        container.style.cursor = 'move';
    });
})();